<template>
  <div>
    <SearchBar :namespace="namespace">
      <SearchBarItem label="id:" :labelLg="2">
        <Input type="text" v-model="queryParam.id.value" clearable />
      </SearchBarItem>
      <SearchBarItem label="类型:" :labelLg="5">
        <RemoteSelect
          v-model="queryParam.type.value"
          placeholder="请选择"
          :api="typeApi"
          valueKey="id"
          clearable
        />
      </SearchBarItem>
      <SearchBarItem label="名称:" :labelLg="5">
        <Input type="text" v-model="queryParam.name.value" placeholder="请输入, 支持模糊查询" clearable />
      </SearchBarItem>
      <SearchBarItem label="clientId:" :labelLg="5">
        <Input type="text" v-model="queryParam.clientId.value" placeholder="请输入, 支持模糊查询" clearable />
      </SearchBarItem>
    </SearchBar>
    <RemoteTable :namespace="namespace" :columns="columns">
      <Authc permissions="auth:application:add">
        <Button type="primary" to="add">新增</Button>
      </Authc>
    </RemoteTable>
  </div>
</template>

<script>
import RemoteTable from "@/components/RemoteTable";
import Authc from "@/components/Authc";
import SearchBar from "@/components/SearchBar";
import RemoteSelect from "@/components/RemoteSelect";
import request from "@/utils/request";
import config from "@/utils/config";
import Action from "./Action";
import { namespace } from "../module";
import { Button, Input, Modal, Message } from "view-design";
export default {
  name: "ThirdApplicationListView",
  components: {
    RemoteTable,
    Button,
    Input,
    SearchBar,
    SearchBarItem: SearchBar.SearchBarItem,
    Modal,
    Authc,
    RemoteSelect
  },
  data: function() {
    let vm = this;
    return {
      showEditForm: false,
      editId: null,
      namespace: namespace,
      columns: [
        {
          title: "id",
          key: "id",
          align: "center",
          width: 250,
          fixed: "left"
        },
        {
          title: "名称",
          key: "name",
          align: "center",
          width: 250
        },
        {
          title: "clientId",
          key: "clientId",
          align: "center",
          width: 250
        },
        {
          title: "类型",
          key: "typeName",
          align: "center",
          width: 150
        },
        {
          title: "简介",
          key: "describe",
          align: "center",
          minWidth: 200
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          permissions: "",
          width: 90,
          render: function(h, data) {
            return h(Action, {
              props: {
                row: data.row
              }
            });
          }
        }
      ]
    };
  },
  computed: {
    queryParam: {
      get() {
        return this.$store.state[namespace].query;
      },
      set(value) {
        this.$store.commit(`${namespace}/saveState`, {
          query: value
        });
      }
    },
    typeApi: function() {
      return (
        config.serverProxy +
        config.authServicePath +
        "/thirdApplication/getTypeSelectOptions"
      );
    }
  },
  methods: {}
};
</script>

<style>
</style>